<template>
  <div>
    <div class="container">
      <template>
        <div id="EChart" style="height: 400px;"></div>
<!--        <div id="EChartUser" style="height: 400px;"></div>-->
      </template>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
let EChart
let EChartUser
export default {
  name: 'count',
  components: {
  },
  data: function () {
    return {
      areaCountX: [],
      areaCountY: [],
      date: '',
      config: {
        title: { text: '昨日请求统计' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          data: this.areaCountX
        },
        yAxis: {},
        series: [
          {
            name: '请求次数',
            type: 'bar',
            data: this.areaCountY
          }
        ]
      },
      configUser: {
        title: {
          text: '注册用户类别',
          subtext: '',
          left: ''
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted: function () {
    this.countAreaCount()
    this.countUserTypeCount()
  },
  created () {
  },
  methods: {
    countAreaCount: function () {
      axios({
        url: '/api/blog/requestLog/countAreaCount',
        method: 'post'
      }).then((res) => {
        console.log(res.data)
        this.config.xAxis.data = res.data.data.x
        this.config.series[0].data = res.data.data.y
        this.date = res.data.data.date
        this.getRenderer()
        this.getRendererUser()
      })
    },
    countUserTypeCount: function () {
      axios({
        url: '/api/blog/api/gitee/listType',
        method: 'get'
      }).then((res) => {
        console.log(res.data)
        this.getRendererUser()
      })
    },
    getRenderer: function () {
      // 基于准备好的dom，初始化echarts实例
      EChart = this.$echarts.init(document.getElementById('EChart'))
      EChart.setOption(this.config)
    },
    getRendererUser: function () {
      // 基于准备好的dom，初始化echarts实例
      EChartUser = this.$echarts.init(document.getElementById('EChartUser'))
      EChartUser.setOption(this.configUser)
    }
  }
}
</script>
